<template>
	<div class="conPpageBox">
		<!-- <div class="navbar">
			<div class="hearderBoxIcon" @click="goback()">
				<img src="../../assets/images/fanhuijiantou.png" alt="">
			</div>
			<div class="title" v-if="type == 1">{{$t('indexTitle.title76')}}</div>
			<div class="title" v-if="type == 2">{{$t('indexTitle.title77')}}</div>
			<div class="title" v-if="type == 3">USDT</div>
			<div class="title" v-if="type == 4">{{$t('indexTitle.title288')}}</div>
			<div class="right">
				  @click="gonextPage()"
				<img src="../../assets/images/zhuyi3.png" alt="" />
			</div>
		</div> -->
		<div class="hearderBox">
			<div class="hearderBoxIcon" @click="goback">
				<img src="../../assets/images/fanhuijiantou.png" alt="">
			</div>
			<div class="title" v-if="type == 1">{{$t('indexTitle.title76')}}</div>
			<div class="title" v-if="type == 2">{{$t('indexTitle.title77')}}</div>
			<div class="title" v-if="type == 3">USDT</div>
			<div class="title" v-if="type == 4">{{$t('indexTitle.title288')}}</div>
			<!-- <div class="right">
				<img src="../../assets/images/zhuyi3.png" alt="">
			</div> -->
		</div>
		<div class="mc-deposit-section">
			<!-- <el-button>USDT H5</el-button> -->
		</div>
		<div class="from" v-if="tep == 1">
			<div class="mc-collection-accordion-label"> {{$t('indexTitle.title226')}}</div>
			<div class="mc-collection-opt-warpper">
				<div class="mc-collection-option">
					<div class="mc-collection-information">
						<img v-if="type == 1" class="icon" src="../../assets/images/zsk.webp" alt="" />
						<img v-if="type == 2" class="icon" src="../../assets/images/bld.png" alt="" />
						<img v-if="type == 3" class="icon" src="../../assets/images/usdt.webp" alt="" />
						<img v-if="type == 4" class="icon" src="../../assets/images/yinhangzhanghu.png" alt="" />
						<div class="mc-collection-content">
							<div class="mc-collection-basic">
								<div class="mc-collection-name" v-if="type == 1">{{$t('indexTitle.title76')}}</div>
								<div class="mc-collection-name" v-if="type == 2">{{$t('indexTitle.title77')}}</div>
								<div class="mc-collection-name" v-if="type == 3">USDT</div>
								<div class="mc-collection-name" v-if="type == 4">{{$t('indexTitle.title288')}}</div>
								<div class="mc-collection-description" v-if="type == 1">
									{{$t('indexTitle.title291')}}{{$t('indexTitle.title289')}}{{systemconfig.zsk_min||0}}
									{{$t('indexTitle.title290')}}{{systemconfig.zsk_max||0}}
								</div>
								<div class="mc-collection-description" v-if="type == 2">
									{{$t('indexTitle.title291')}}{{$t('indexTitle.title289')}}{{systemconfig.bld_min||0}}
									{{$t('indexTitle.title290')}}{{systemconfig.bld_max||0}}
								</div>
								<div class="mc-collection-description" v-if="type == 3">
									{{$t('indexTitle.title291')}}{{$t('indexTitle.title289')}}{{systemconfig.usdt_min||0}}
									{{$t('indexTitle.title290')}}{{systemconfig.usdt_max||0}}
								</div>
								<div class="mc-collection-description" v-if="type == 4">
									{{$t('indexTitle.title291')}}{{$t('indexTitle.title289')}}{{systemconfig.yh_min||0}}
									{{$t('indexTitle.title290')}}{{systemconfig.yh_max||0}}
								</div>
							</div>
							<div class="mc-collection-fee">
								<div class="mc-collection-description">{{$t('indexTitle.title79')}}:</div>
								<p class="mc-collection-description">{{$t('indexTitle.title80')}}</p>
							</div>
							<img v-if="showmore" @click="showmore = false" class="showmore"
								src="../../assets/images/top.png" alt="" />
							<img v-if="!showmore" @click="showmore = true" class="showmore"
								src="../../assets/images/down.png" alt="" />
						</div>
					</div>
					<div class="mc-collection-accordion" v-if="showmore">
						<div class="">
							<div class="mc-input-field" :class="{errorww:isShowThreess,error:blurnumstyle}">
								<div class="mc-input-base">
									<el-input v-model="num" :placeholder="$t('indexTitle.title81')"
										@input="inputjianting(0)"></el-input>
									<!-- <div class="mc-input-field-suffix">港元</div> -->
								</div>
							</div>
							<div v-if="blurnumstyle" class="tips1">
								<img src="../../assets/images/zhuyitow.png" alt="">
								{{tips}}
							</div>
							<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
						</div>
						<!-- <div class="">
							<div class="mc-input-field" style="margin-top: 10px;" v-if="type == 1"
								:class="{errorww:isShowThreess,error:blurpsdstyle}">
								<div class="mc-input-base">
									<el-input v-model="name" :placeholder="$t('indexTitle.title82')"
										@input="inputjianting(1)"></el-input>
								</div>
							</div>
							<div v-if="blurpsdstyle" class="tips1">
								<img src="../../assets/images/zhuyitow.png" alt="">
								{{tips1}}
							</div>
							<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
						</div> -->
						<div class="mc-form-item" v-if="newRechargeActivityList.length>0">
							<div class="mc-form-itemTow" v-for="(it,index) in newRechargeActivityList" :key="index">
								<el-radio v-model="activitId" :label="it.id" :disabled="it.radioDisabled">
									<div class="mc-form-itemTowText" :class="{mcFormItemTowText:it.radioDisabled}">
										<div class="dafdsfL">
											<p>{{it.title}}</p>
											<p>{{it.title}}</p>
											<p>{{it.type}}</p>
										</div>
										<div class="dafdsfR">
											<p>{{$t('indexTitle.title308')}}</p>
											<p>{{$t('indexTitle.title308')}}</p>
											<p>{{it.money}}</p>
										</div>
									</div>
								</el-radio>

							</div>
							<!-- @click="drawer = true"
							<div class="mc-input-field-label">{{$t('indexTitle.title83')}}</div>
							<div class="mc-input-base1">{{fanlitype.name}}</div>
							<img src="../../assets/images/add.png" alt=""> -->
						</div>
						<el-button @click="changetep(2)">{{$t('indexTitle.title85')}}</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="from" v-if="tep == 2">
			<div class="mc-collection-option">
				<div class="tep2title">
					{{$t('indexTitle.title92')}}：<span>$ {{amount}}</span>
					<font v-if="type == 3">&nbsp;&nbsp;&nbsp;USDT <span>$ {{amount_show}}</span></font>
				</div>
				<div class="tep2title" style="margin-top: 12px;font-size: 18px;">{{$t('indexTitle.title93')}}</div>
				<div class="flexs" v-if="type == 1">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title94')}}：</div>
						<div class="consd">{{systemconfig.zsk_account}}</div>
					</div>
					<img @click="copyUrl(systemconfig.zsk_account)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 1">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title95')}}：</div>
						<div class="consd">{{systemconfig.zsk_name}}</div>
					</div>
					<img @click="copyUrl(systemconfig.zsk_name)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 2">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title96')}}：</div>
					</div>
					<img class="erweima" :src="baseUrl + systemconfig.bld_pic" alt="" />
				</div>
				<div class="flexs" v-if="type == 3">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title97')}}(TRC)：</div>
						<div class="consd">{{systemconfig.usdt_trc_name}}</div>
					</div>
					<img @click="copyUrl(systemconfig.usdt_trc_name)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 3">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title96')}}：</div>
					</div>
					<img class="erweima" :src="baseUrl + systemconfig.usdt_trc_pic" alt="" />
				</div>
				<div class="flexs" v-if="type == 4">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title295')}}：</div>
						<div class="consd">{{systemconfig.yhk_name}}</div>
					</div>
					<img @click="copyUrl(systemconfig.yhk_name)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 4">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>{{$t('indexTitle.title297')}}：</div>
						<div class="consd">{{systemconfig.yhk_account}}</div>
					</div>
					<img @click="copyUrl(systemconfig.yhk_account)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="btns">
					<el-button @click="changetep(1)">{{$t('indexTitle.title98')}}</el-button>
					<el-button class="queren" @click="submit()">{{$t('indexTitle.title99')}}</el-button>
				</div>
			</div>
		</div>
		<div style="padding: 5px 15px 10px;">
			<el-carousel trigger="click" height="192px">
				<el-carousel-item v-for="(item,index) in swiperlist" :key="index">
					<img :src="item" alt="" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<el-drawer :visible.sync="drawer" direction="btt" :show-close="false" :modal-append-to-body="false">
			<!-- <div class="bank-list-filter">
				<div class="filter-input-wrapper">
					<img src="../../assets/images/sousuo.png" alt="" />
					<el-input v-model="search" placeholder="输入搜寻的银行名称"></el-input>
				</div>
			</div> -->
			<div class="nrc-tabs" style="margin-top: 20px;">
				<div class="nrc-tabs-nav">
					<span class="nrc-tabs-tab" :class="tab == 0 ? 'active':''"
						@click="tab = 0">{{$t('indexTitle.title227')}}</span>
					<!-- <span class="nrc-tabs-tab" :class="tab == 1 ? 'active':''" @click="tab = 1">UVWXYZ</span> -->
				</div>
				<div class="nrc-tab-pane" v-if="tab == 0">
					<div class="item" :class="fanlitype.type == item.type ? 'active':''" v-for="(item,index) in fanli"
						:key="index" @click="selectfanli(item)">{{item.name}}</div>
				</div>
				<!-- <div class="nrc-tab-pane" v-if="tab == 1">
					<div>
						<div class="mc-bank-letter">U</div>
						<div class="mc-banks">
							<div class="item">USDT-TRC20</div>
							<div class="item">USDT-TRC20</div>
							<div class="item">USDT-TRC20</div>
						</div>
					</div>
				</div> -->
			</div>
		</el-drawer>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../../assets/img/loading-ani.svg" alt="" />
		</div>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		fanlitype,
		recharge,
		getsystemconfig,
		newRechargeActivity
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			loadingFour
		},
		data() {
			return {
				showmore: true,
				num: '',
				name: '',
				drawer: false,
				search: '',
				tab: 0,
				swiperlist: [
					require('../../assets/images/swiper1.png'),
					require('../../assets/images/swiper2.png'),
					require('../../assets/images/swiper3.png'),
					require('../../assets/images/swiper4.png'),
				],

				fanli: [],
				fanlitype: [],
				type: 1,
				tep: 1,
				systemconfig: [],

				amount: 0,
				amoutshow: 0,
				xiaoshu: 0,
				baseUrl: 'http://43.198.233.28/',

				isShowThreess: false,
				messageText: "",
				blurnumstyle: false,
				tips: '',
				blurpsdstyle: false,
				tips1: '',
				activitId: '',
				newRechargeActivityList: [],
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
				isloadingTowShow: false,
			}
		},
		created() {
			this.type = this.$route.query.type
		},
		mounted() {
			this.getfanli()
			this.getsystem()
			this.getnewRechargeActivity()
			this.tep = 1
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getfanli() {
				fanlitype().then((res) => {
					if (res.status.errorCode == 0) {
						this.fanli = res.data
						this.fanlitype = res.data[0]
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getsystem() {
				getsystemconfig().then((res) => {
					if (res.status.errorCode == 0) {
						this.systemconfig = res.data
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getnewRechargeActivity() {
				let data = {
					"type": this.type
				}
				newRechargeActivity(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.newRechargeActivityList = res.data;
						this.newRechargeActivityList.forEach((item, index) => {
							console.log(item);
							item.radioDisabled = false;
							if (this.num < item.money) {
								item.radioDisabled = true;
							} else {
								item.radioDisabled = false;
							}
						})

					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			selectfanli(e) {
				this.fanlitype = e
				this.drawer = false
			},
			inputjianting(num) {
				console.log(num, this.num);
				if (num == 0) {
					if (!this.num) {
						this.newRechargeActivityList.forEach((item, index) => {
							let numberPrice = parseFloat(this.num + '.00')
							console.log(numberPrice, item.money);
							if (numberPrice < item.money) {
								item.radioDisabled = true;
							} else if (numberPrice > item.money || numberPrice == item.money) {
								item.radioDisabled = false;
							}
						})
						this.activitId = ''
						this.blurnumstyle = true;
						this.tips = this.$t('indexTitle.title81')
					} else {
						this.newRechargeActivityList.forEach((item, index) => {
							let numberPrice = parseFloat(this.num + '.00')
							console.log(numberPrice, item.money);
							if (numberPrice < item.money) {
								item.radioDisabled = true;
								this.activitId = ''
							} else if (numberPrice > item.money || numberPrice == item.money) {
								item.radioDisabled = false;
							}
						})
						this.blurnumstyle = false;
						this.isShowThreess = false;
						this.messageText = '';
					}
				}
				if (num == 1) {
					if (!this.name) {
						this.blurpsdstyle = true;
						this.tips1 = this.$t('indexTitle.title82')
					} else {
						this.blurpsdstyle = false;
						this.isShowThreess = false;
						this.messageText = '';
					}
				}
			},
			changetep(e) {
				if (e == 2) {
					this.blurpsdstyle = false;
					this.blurnumstyle = false;
					this.tips = '';
					this.tips1 = '';

					if (!this.num) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title81')
						// this.$message.error('请输入充值金额');
						return false
					}
					if (this.num && this.type == 1 && this.num < this.systemconfig.zsk_min) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title292') + this.systemconfig.zsk_min
						// this.$message.error('充值额度最低');
						return false
					}
					if (this.num && this.type == 1 && this.num > this.systemconfig.zsk_max) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title293') + this.systemconfig.zsk_max
						// this.$message.error('充值额度最高');
						return false
					}
					if (this.num && this.type == 2 && this.num < this.systemconfig.bld_min) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title292') + this.systemconfig.bld_min
						// this.$message.error('充值额度最低');
						return false
					}
					if (this.num && this.type == 2 && this.num > this.systemconfig.bld_max) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title293') + this.systemconfig.bld_max
						// this.$message.error('充值额度最高');
						return false
					}
					if (this.num && this.type == 3 && this.num < this.systemconfig.usdt_min) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title292') + this.systemconfig.usdt_min
						// this.$message.error('充值额度最低');
						return false
					}
					if (this.num && this.type == 3 && this.num > this.systemconfig.usdt_max) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title293') + this.systemconfig.usdt_max
						// this.$message.error('充值额度最高');
						return false
					}
					if (this.num && this.type == 4 && this.num < this.systemconfig.yh_min) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title292') + this.systemconfig.yh_min
						// this.$message.error('充值额度最低');
						return false
					}
					if (this.num && this.type == 4 && this.num > this.systemconfig.yh_max) {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title293') + this.systemconfig.yh_max
						// this.$message.error('充值额度最高');
						return false
					}
					// if (this.type == 1) {
					// 	if (!this.name) {
					// 		this.blurpsdstyle = true
					// 		this.tips1 = this.$t('indexTitle.title82')
					// 		// this.$message.error('请输入付款姓名');
					// 		return false
					// 	}
					// }
					this.xiaoshu = parseInt(Math.random() * 40, 10);
					this.amount = Number(this.num) + Number(this.xiaoshu / 100);
					this.amount_show = (this.amount / this.systemconfig.usdt_lv).toFixed(2);
				} else if (e == 1) {
					this.num = null;
					this.amount = 0;
				}
				this.tep = e
			},
			submit() {
				let that = this;
				this.isloadingTowShow = true;
				this.isShowThreess = false;
				this.messageText = '';
				let xiao = 0;
				if (this.xiaoshu < 10) {
					xiao = '0' + this.xiaoshu;
				} else {
					xiao = this.xiaoshu;
				}
				let data = {
					type: this.type,
					account: this.name,
					money: this.num,
					// fanli: this.fanlitype.type,
					activit_id: this.activitId,
					xiaoshu: xiao
				}
				recharge(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						setTimeout(function() {
							that.$router.push({
								path: '/promotion',
								query: {
									title: that.$t('indexTitle.title105')
								}
							});
						}, 1000)
					} else {
						this.tep = 1;
						this.isShowThreess = true;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
					this.isloadingTowShow = false;
				}).catch((err) => {
					this.isloadingTowShow = false;
					console.log(err, 'err')
				});
			},
			copyUrl(e) {
				let url = e
				let domInput = document.createElement('input');
				domInput.value = url;
				document.body.appendChild(domInput); // 添加input节点
				domInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				// this.$message.success(this.$t('indexTitle.title100'));
				this.msgTextTow = this.$t('indexTitle.title100');
				this.isShowLoadingTeow = true;
				this.isShowCloseBot = true;
				setTimeout(() => {
					this.isShowLoadingTeow = false;
				}, 2000)
				// this.$message({
				// 	showClose: true,
				// 	message: this.$t('indexTitle.title100'),
				// 	type: 'success'
				// });
				domInput.remove()
			},
			goback() {
				this.blurpsdstyle = false;
				this.blurnumstyle = false;
				this.tips = '';
				this.tips1 = '';
				this.isShowThreess = false;
				this.messageText = '';
				this.$router.go(-1)
			},
			gonextPage() {
				console.log(111);
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
	.conPpageBox {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.navbar {
		background-color: #fff;
		box-shadow: inset 0 -1px 0 #ececec;
		color: #545658;
		height: 45px;
		left: 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		padding: 0 10px;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #fff;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		box-shadow: inset 0 -1px 0 #ececec;
		left: 0;
		overflow: hidden;
		z-index: 99;
	}

	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}

	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}

	/* .title {
		flex: 1;
		font-size: 20px;
		line-height: 1;
		text-align: center;
	} */
	.right {
		position: fixed;
		top: 3px;
		right: 10px;
	}

	.right img {
		width: 24px;
		height: 24px;
	}

	.mc-deposit-section {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
		padding: 10px 10px 0;
		margin-top: 45px;
	}

	/deep/ .el-button {
		color: #5235ff;
		background-color: #fff;
		border: 1px solid #e9e9e9;
		border-color: #5235ff;
		border-radius: 5px;
		font-size: 14px;
		margin-top: 5px;
		min-height: 32px;
		height: 44px;
		width: 100%;
	}

	.from {
		padding: 5px 15px 10px;
	}

	.mc-collection-accordion-label {
		color: #545658;
		font-size: 12px;
		line-height: 1.25;
	}

	.mc-collection-opt-warpper {
		max-height: 600px;
		overflow: auto;
	}

	.mc-collection-option {
		background-color: #fafafc;
		border: 1px solid #ececec;
		border-radius: 5px;
		margin: 10px 0 0;
		padding: 15px 10px;
		position: relative;
	}

	.mc-collection-information {
		cursor: pointer;
		display: flex;
	}

	.icon {
		width: 36px;
		height: 36px;
	}

	.mc-collection-content {
		align-items: center;
		display: flex;
		flex-grow: 1;
		margin: 0 5px;
	}

	.mc-collection-basic {
		flex-grow: 1;
	}

	.mc-collection-name {
		color: #545658;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		margin-bottom: 5px;
	}

	.mc-collection-description {
		color: #939698;
		font-size: 10px;
		line-height: 14px;
	}

	.tips1 {
		margin-top: 10px;
		color: #e94951;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.tips img,
	.tips1 img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.mc-collection-fee {
		text-align: right;
	}

	.showmore {
		width: 18px;
		height: 18px;
		margin-left: 4px;
	}

	.mc-collection-accordion {
		margin-top: 20px;
	}

	.mc-input-field {
		background-color: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
	}

	.mc-input-base {
		background-color: transparent;
		color: #545658;
		display: flex;
		font-size: 16px;
		height: 52px;
		padding: 0 15px;
		position: absolute;
		top: 0;
		width: 100%;
	}

	/deep/ .el-input__inner {
		background: 0 0;
		border: none;
		color: #545658;
		flex: 1 100%;
		font-size: 14px;
		height: 100%;
		padding: 0;
	}

	.mc-input-field-suffix {
		align-items: center;
		color: #939698;
		display: flex;
		flex: 1 0 90px;
		justify-content: flex-end;
	}

	.mc-input-amount-field {
		border-top: 1px solid #e9e9e9;
		margin-top: 54px;
		padding: 5px 15px 0;
		padding-bottom: 10px;
		color: #a0a3a5;
		font-size: 12px;
	}

	.mc-form-item {
		margin-top: 10px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
	}

	.mc-form-item img {
		position: absolute;
		right: 16px;
		top: 35%;
		width: 18px;
		height: 18px;
	}

	/deep/.el-radio {
		display: flex;
		width: 100%;
		padding: 5px 10px;
	}

	.mc-form-itemTow {
		width: 100%;
		display: flex;
	}

	.mc-form-itemTowText {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.dafdsfR p:first-child {
		font-size: 14px;
		color: transparent;
	}

	.dafdsfR p:nth-child(2),
	.dafdsfR p:nth-child(3) {
		font-size: 12px;
		margin-top: 7px;
		color: #ccc;
		text-align: right;
	}

	/deep/.el-radio__input.is-disabled+span.el-radio__label {
		display: block;
		width: 100%;
	}

	/deep/.el-radio__label {
		width: 100%;
	}

	/deep/.el-radio__input.is-checked .el-radio__inner {
		border-color: #7240ff;
		background: #7240ff;
	}

	.dafdsfL p:first-child {
		font-size: 14px;
		color: #333;
	}

	.dafdsfL p:nth-child(2),
	.dafdsfL p:nth-child(3) {
		font-size: 12px;
		margin-top: 7px;
		color: #ccc;
	}

	.mcFormItemTowText {
		opacity: 0.5;
	}


	.mc-input-field-label {
		font-size: 10px;
		top: 8px;
		color: #939698;
		padding-left: 15px;
		position: absolute;
		transition: .2s;
	}

	.mc-input-base1 {
		box-shadow: none;
		font-size: 14px;
		height: 28px;
		top: 24px;
		padding: 0 15px;
		position: absolute;
		width: 100%;
		background-color: transparent;
		color: #545658;
		display: flex;
	}

	/deep/ .mc-collection-accordion .el-button {
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		background-color: #7240ff;
		border-radius: 5px;
		margin-top: 10px;
		width: 100%;
	}

	/deep/ .el-drawer {
		height: 75vh !important;
	}

	/deep/ .el-drawer__header {
		margin: 0;
		padding: 0;
	}

	.bank-list-filter {
		padding: 10px;
	}

	.filter-input-wrapper {
		align-items: center;
		background-color: #f9f9f9;
		border: 1px solid #e0e0e0;
		border-radius: 0.25rem;
		display: flex;
		height: 2.75rem;
		justify-content: space-between;
		padding: 5px;
		position: relative;
		width: 100%;
	}

	.filter-input-wrapper img {
		width: 22px;
		height: 22px;
		margin: 0 6px;
	}

	.error {
		border: 1px solid #e94951;
	}

	.errorww {
		border: 1px solid #e94951;
	}

	/deep/ .filter-input-wrapper .el-input__inner {
		background-color: transparent;
		border: none;
		flex: 1;
		height: 100%;
		border-radius: 2px;
		color: #333;
		font-size: 13px;
		padding-left: 8px;
	}

	.nrc-tabs-nav {
		align-items: center;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.nrc-tabs-tab {
		height: auto;
		opacity: .7;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		min-width: 65px;
		text-align: center;
		padding: 4px 8px;
		width: 25%;
	}

	.nrc-tabs-tab.active {
		background-image: inherit;
		border-bottom: inherit;
		color: inherit;
		font-weight: 700;
		opacity: 1;
	}

	.nrc-tab-pane {
		padding: 24px 13px 0;
	}

	.nrc-tab-pane .item {
		flex: 1;
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border: 1px solid #000;
		/* box-shadow: 0 0 5px 2px rgba(82,53,255,.8); */
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 20px;
		min-height: 42px;
		padding: 7px 9px;
	}

	.nrc-tab-pane .item.active {
		border-color: rgba(82, 53, 255, .8);
		box-shadow: 0 0 5px 2px rgba(82, 53, 255, .8);
	}

	.mc-bank-letter {
		color: #545658;
		font-size: 16px;
		line-height: 22px;
	}

	.mc-banks {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.nrc-tab-pane .mc-banks .item {
		flex: 0 1 calc(50% - 10px);
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border-color: rgba(82, 53, 255, .8);
		box-shadow: 0 0 5px 2px rgba(82, 53, 255, .8);
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 4px;
		min-height: 42px;
		padding: 7px 10px;
		margin-top: 10px;
	}

	/deep/ .el-carousel__container img {
		width: 100%;
		height: 192px;
	}

	.buttons {
		position: fixed;
		z-index: 11111;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	.tep2title {
		text-align: center;
		font-size: 14px;
		color: #545658;
	}

	.tep2title span {
		font-size: 18px;
		font-weight: bold;
	}

	.flexs {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #545658;
		margin-top: 20px;
	}

	.flexs .consd {
		flex: 1;
		font-size: 16px;
		font-weight: bold;
		word-break: break-all;
	}

	.flexs img {
		width: 18px;
		height: 18px;
	}

	.bankBoxs {
		margin-left: 20px;
	}

	.bankBoxs div {
		margin-top: 5px;
	}

	.btns {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.queren {
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		background-color: #7240ff;
		border-radius: 5px;
		width: 100%;
	}

	.flexs img.erweima {
		width: 200px;
		height: auto;
	}
</style>